<template>
    <van-nav-bar
            title="优惠券"
            left-text="返回"
            left-arrow
            fixed
            @click-left="onClickLeft"
    />
    <van-floating-bubble @click="onClick">
        <!-- 使用 van-icon 组件显示 "+" 图标 -->
<!--        <van-icon name="plus" class="custom-icon" />-->
        <!-- 如果需要添加提示文字，可以使用插槽（如果 van-floating-bubble 支持） -->
         <div slot="content" class="coupon-center-text">领券中心</div>
    </van-floating-bubble>
    <van-tabs v-model:active="active" sticky class="my-tabs">
        <van-tab v-for="(tab, tabIndex) in tabs" :title="tab" :key="tabIndex">
            <div class="coupon">
                <van-list
                    v-model:loading="loading[tabIndex]"
                    :finished="finished[tabIndex]"
                    finished-text="没有更多了"
                    @load="onLoad(tabIndex)"
                >
                    <van-cell
                        v-for="item in filteredCouponListings[tabIndex]"
                        :key="item.id"
                        @click="toCouponDetail(item.couponsId)"
                    >
                        <van-row>
                            <van-col style="text-align: right;"> <!-- 将文本对齐设置为右对齐 -->
                                <span>￥</span><span style="font-size: 30px; color: blue;">{{item.discount}}</span> <!-- 加大字体并设置颜色为蓝色 -->
                            </van-col>
                            <van-col style="text-align: left;padding-left: 70px;"> <!-- 保持文本左对齐 -->
                                {{item.name}}<br>
                                {{item.info}}<br>
                                <div style="margin-left: 10px; color: #1a1a1a;">
                                    <div style="font-size: 14px;"> <!-- 保持字体大小为14px -->
                                        至 {{item.endTime}} <!-- 显示开始和结束日期 -->
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-cell>
                </van-list>
            </div>
        </van-tab>
    </van-tabs>


</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {get} from "../../util/request.js";
import {showToast} from "vant";
const router=useRouter();
const active = ref(0);
const onClickLeft = () => history.back();
const couponListings = ref([]);
const tabs = ref(['未使用','已使用','已过期','已赠送'])
const loading = ref(Array(tabs.value.length).fill(false)); // 初始化加载状态数组
const finished = ref(Array(tabs.value.length).fill(false)); // 初始化完成状态数组
const filteredCouponListings = ref([]); // 筛选后的优惠券列表，按 tab 索引分组
const onClick = () => {
    router.push({ path: '/couponAdd'});
};
const toCouponDetail = (couponsId)=>{
    router.push({ path: '/couponDetail', query: { id: couponsId } });
}
const onLoad = (tabIndex) => {
    loading.value[tabIndex] = true; // 设置对应标签页的加载状态为true
    // 异步更新数据
    setTimeout(() => {
        get("user/coupon/list").then(res => {
            loading.value[tabIndex] = false; // 加载完成，设置对应标签页的加载状态为false
            finished.value[tabIndex] = true;
            if (res.code === 0){
                if(res.data.length !== 0){
                    couponListings.value = res.data
                    // console.log(JSON.stringify(couponListings.value))
                    // 初始化筛选后的优惠券列表
                    filteredCouponListings.value = tabs.value.map(() => []);//过滤后的列表
                    couponListings.value.forEach(coupon => {
                        const index = coupon.state - 1; // 假设 state 从 1 开始
                        if (index >= 0 && index < tabs.value.length) {
                            filteredCouponListings.value[index].push(coupon);
                        }
                    });
                    // console.log(JSON.stringify(filteredCouponListings.value[0]))
                    // console.log(JSON.stringify(filteredCouponListings.value[1]))
                    // console.log(JSON.stringify(filteredCouponListings.value[2]))
                    // console.log(JSON.stringify(filteredCouponListings.value[3]))

                } else {
                    finished.value = true;
                }
            } else {
                showToast(res.data);
                finished.value = true;
                loading.value = false;
            }
        }).catch(()=>{
            loading.value = false;
            finished.value = true;
            showToast("网络错误")
        })
    }, 200);
};
</script>

<style scoped>
.my-tabs {
    position: fixed; /* 使用固定定位 */
    top: 50px; /* 距离页面顶部50px */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度占满全屏 */
    z-index: 1000; /* 设置较高的z-index以确保其在其他内容之上 */
}
.coupon {
    /* 设置位置，比如距离顶部一定的距离 */
    /*margin-top: 60px;*/
    /* 设置宽度 */
    width: 100%;
    /* 其他美化样式，比如背景色、边框等 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
}
.coupon-center-text {
    /* 设置文字颜色为黑色 */
    color: #000;
    /* 假设插槽内容是一个内联元素（如 span），我们可能需要将它变为块级元素或行内块级元素以便添加背景色和边框 */
    display: inline-block;
    /* 设置背景色为白色 */
    background-color: #fff;
    /* 添加黑色边框 */
    border: 1px solid #000;
    /* 其他样式，如内边距、字体大小等 */
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%; /* 圆角半径设置为元素宽度的一半，使其成为圆形 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影的水平和垂直偏移量、模糊半径和颜色 */
}
</style>